<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luckin coffee</title>
    <link rel="shortcut icon" href="./image/icon-page1/icon_ruixingkafei1.png">
    <link rel="stylesheet" href="./css/ALL.css">
    <link rel="stylesheet" href="./css/Home.css">
</head>


<body>

    <!-- 头部开始 -->
    <header class="head">
        <!-- logo部分 -->
        <div class="header-logo">
            <a href="Home.html">
                <span class="header-logo-img"></span>
                <strong class="header-logo-font">luckin coffee</strong>
            </a>
        </div>
        <!-- 右侧导航 -->
        <ul>
            <li class="active">
                <a href="Home.html">Home
                    <hr id="line1" class="underline">
                </a>

            </li>
            <li class="active">
                <a href="Get the APP.html">Get the APP
                    <hr id="line2" class="underline">
                </a>
            </li>
            <li class="active">
                <a href="Products.html">Products
                    <hr id="line3" class="underline">
                </a>
            </li>
            <li class="active">
                <a href="About Us.html">About Us
                    <hr id="line4" class="underline">
                </a>
            </li>
            <li class="active">
                <a href="Investor-Relations/Investor Relations.html" target="_blank">Investor Relations
                    <hr id="line5" class="underline">
                </a>
            </li>
        </ul>
    </header>

    <!-- js -->
    <script>
        var head = document.querySelector('.head');
        function scroll() {
            let top = head.offsetTop;
            console.log(top);
            let scrollTop = document.documentElement.scrollTop;
            console.log(scrollTop);
            if (scrollTop <= top) {
                head.style.backgroundColor = 'transparent';
            }
            else {
                head.style.backgroundColor = '#0A2DB8';
            }
        }
        // 每次屏幕滑动时都会检测到，调用scroll方法时刻更新导航栏背景色
        window.addEventListener('scroll', function () {
            scroll();
        })
        scroll();
    </script>

    <!-- 头部结束 -->





    <!-- pageCenter轮播图开始 -->
    <div class="pageCenter">
        <div class="banner">
            <img id="page-top" src="./image/icon-page1/Home-page1.jpg">

        </div>
        <a href="Get the APP.html">
            <div id="btn" class="downLoad-Btn">
                Download App
            </div>
        </a>
    </div>

    <!-- js轮播 -->
    <script>
        let imgtge = document.getElementById("page-top");
        let btn = document.getElementById('btn');
        var z = 1;
        var change = function () {
            ++z;
            if (z > 3) {
                z = 1;
            }
            if (z == 1) {
                btn.style.zIndex = '2';
            }
            else {
                btn.style.zIndex = '0';
            }
            imgtge.src = './image/icon-page1/Home-page' + z + '.jpg';
        }
        setInterval(change, 4000);
    </script>

    <!-- 轮播图结束 -->




    <!-- world开始 -->
    <div class="world">
        <p class="world-title">Explore Our Coffee World</p>
        <div class="world-list">
            <div>
                <p class="img1"></p>
                <p class="title">
                    HIGH QUALITY
                    <br>
                    ARABICA BEANS
                </p>
                <p class="text">
                    At luckin coffee, we pride ourselves on using only the finest Arabica beans sourced directly from
                    top coffee producing regions.
                </p>
            </div>

            <div>
                <p class="img2"></p>
                <p class="title">
                    BLENDED BY THE
                    <br>
                    WBC CHAMPIONS
                </p>
                <p class="text">
                    Every batch of our coffee is carefully tested and blended by our team of the WBC champions, hailing
                    from Poland, Italy, Japan, Australia and China.
                </p>
            </div>

            <div>
                <p class="img3"></p>
                <p class="title">
                    FRESHLY ROASTED
                    <br>
                    FRESHLY GROUND
                </p>
                <p class="text">
                    We guarantee that every cup of our coffee is made fresh just for you, ensuring that you experience
                    the full depth of flavor and aroma with every sip.
                </p>
            </div>
        </div>
    </div>

    <!-- world结束 -->


    <!-- beans开始 -->
    <div class="beans">
        <div class="beans-content">
            <div class="beans-title">
                We are proud to present you high-quality Arabica beans
            </div>
            <div class="line"></div>
            <div class="text">
                Our coffee is selected from more than 180 blending formulas that highly matches the taste of consumers.
            </div>
        </div>
    </div>

    <!-- beans结束 -->



    <!-- wbc开始 -->
    <div class="wbc">
        <div class="wbc-title">
            <p class="title">Blended by the WBC Champions</p>
            <p class="line"></p>
            <p class="text">
                Every batch of our coffee is carefully tested and blended by our team of the
                <br>
                WBC champions, hailing from Poland, Italy, Japan, Australia and China.
            </p>
        </div>
        <div class="wbc-banner">
            <div id="wbc-img-1" class="img1"></div>
            <div id="wbc-img-2" class="img2"></div>
            <div id="wbc-img-4" class="img4"></div>
            <div id="wbc-img-5" class="img5"></div>
            <div id="wbc-img-3" class="img3"></div>
        </div>
    </div>

    <script>
        // let wbcImgs = document.querySelectorAll('wbc-banner-img');
        // for(var i=0;i<wbcImgs.length;i++){
        //     wbcImgs[i].onmouseover = function(){
        //         for(var j=0;j<wbcImgs.length;j++){
                    
        //         }
        //     }
        // }

        // let img1 = document.getElementById('wbc-img-1');
        // let img2 = document.getElementById('wbc-img-2');
        // img1.onmouseover = function () {
        //     img1.classList.replace('img1', 'curr');
            // console.log(img1.classList.contains('curr'));
            // if (img1.classList.contains('curr')){

            // }
            // else{
            //     img1.classList.add('curr');
            // }
        // }
        // img1.onmouseout = function () {
        //     img1.classList.replace('curr', 'img1');
        // }


        // img2.onmouseover = function(){
        //     img2.classList.replace('img2','curr2');
        // }
        // img2.onmouseout = function(){
        //     img2.classList.replace('curr2','img2');
        // }
        // img1.onmouseout = function(){
        //     if(img1.classList.contains('curr')){
        //         img1.classList.remove('curr');
        //     }
        // }
    </script>




    <!-- 还没弄完 -->
    <!-- wbc结束 -->




    <!-- fresh开始 -->
    <div class="fresh">
        <div>
            <p class="package"></p>
            <p class="title">
                Freshly Roasted,
                <br>
                Freshly Grounded
            </p>
            <p class="line"></p>
            <p class="text">
                We use state-of-the-art SCHAERER coffee machines from Switzerland in all of our outlets. By
                adopting internationally advanced technology and equipment to roast and grind our high quality coffee
                beans, to truly achieving“freshly roasted and freshly grounded”.
            </p>
        </div>
    </div>
    <!-- fresh结束 -->



    <!-- lifeStyle开始 -->
    <div class="lifeStyle">
        <div>
            <p>Break through the frame and stay innovative with luckin coffee.</p>
            <p class="text">Connect with a community of like-minded young and daring individuals who share your passion
                for coffee and adventure.”</p>
        </div>
    </div>
    <!-- lifeStyle结束 -->



    <!-- stores开始 -->
    <div class="stores">
        <div class="store-title">
            <p class="title">luckin coffee Stores</p>
            <p class="line"></p>
            <p class="text">8000+ stores in China, covering 240+ cities across China.</p>
        </div>
        <div class="container">
            <img src="./image/icon-page1/store1.jpg" id="page-bottom">
        </div>


        <!-- js轮播 -->
        <script>
            let imgtge1 = document.getElementById("page-bottom");
            var p = 1;
            var change1 = function () {
                ++p;
                if (p > 5) {
                    p = 1;
                }
                imgtge1.src = './image/icon-page1/store' + p + '.jpg';
            }
            setInterval(change1, 4000);
        </script>
    </div>

    <!-- stores结束 -->




    <!-- 尾部开始 -->
    <footer>
        <div class="content">
            <!-- logo部分 -->
            <div class="content-logo">
                <span class="content-logo-img"></span>
                <strong class="content-logo-font">luckin coffee</strong>
            </div>
            <!-- 中间部分 -->
            <div class="content-info">

                <!-- 左边 -->
                <div class="content-info-left">
                    <div class="info">
                        <p class="title">Company</p>
                        <p>
                            <a href="About Us.html">OUR BRAND</a>
                        </p>
                        <p>
                            <a href="Products.html">OUR COFFEE</a>
                        </p>
                        <p>
                            <a href="https://investor.lkcoffee.com/">INVESTOR RELATIONS</a>
                        </p>
                    </div>
                    <div class="info">
                        <P class="title">More</P>
                        <p class="text">
                            CONTACT US
                        </p>
                    </div>
                </div>

                <!-- 右边 -->
                <div class="content-info-right">
                    <a href="https://space.bilibili.com/515053624?spm_id_from=333.337.0.0" target="_blank">
                        <p class="bilibili"></p>
                    </a>
                    <a href="https://weibo.com/u/6349791448?nick=luckincoffee%E7%91%9E%E5%B9%B8%E5%92%96%E5%95%A1&noscript=1"
                        target="_blank">
                        <p class="weibo"></p>
                    </a>
                    <a href="#" target="_blank">
                        <p class="wechat"></p>
                    </a>
                </div>
            </div>
            <!-- 最后部分 -->
            <div class="termOfUse">
                <a href="https://luckincoffee.com/privacy-policy">PRIVACY POLICY</a>
                <span style="margin: 0 10px;">|</span>
                <a href="https://luckincoffee.com/terms-of-use">TERMS OF USE</a>
                <span style="margin: 0 10px;">|</span>
                <a href="https://luckincoffee.com/cookie-policy">COOKIESPOLICY</a>
            </div>
        </div>
    </footer>
    <!-- 尾部结束 -->
</body>

</html>